<template>
  <div class="min-h-screen bg-gray-50">
    <NavBar />
    <div class="max-w-3xl mx-auto px-4 py-8">
      <div class="bg-white rounded-xl shadow p-6">
        <div class="text-xl font-semibold">作者认证</div>
        <div class="text-gray-500 mt-1">提交身份证照片与资料，系统将自动从照片中识别姓名和身份证号</div>

        <form class="mt-6 space-y-5" @submit.prevent="submit">
          <!-- 姓名与身份证号由后端OCR自动识别，无需手工填写 -->
          <div>
            <label class="block text-sm text-gray-600 mb-1">笔名</label>
            <input v-model.trim="form.pen_name" type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="请输入笔名" required />
          </div>
          <div>
            <label class="block text-sm text-gray-600 mb-1">作者简介（可选）</label>
            <textarea v-model.trim="form.introduction" rows="3" class="w-full px-3 py-2 border rounded-lg" placeholder="一句话介绍你自己" />
          </div>
          <div>
            <label class="block text-sm text-gray-600 mb-1">作品样例（可选）</label>
            <input v-model.trim="form.sample_work" type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="可填写作品链接或简介" />
          </div>
          <div>
            <label class="block text-sm text-gray-600 mb-1">身份证正面照片（必传，jpg/png ≤ 5MB）</label>
            <input ref="frontRef" type="file" accept="image/*" class="block" required />
          </div>
          <div>
            <label class="block text-sm text-gray-600 mb-1">身份证反面照片（可选）</label>
            <input ref="backRef" type="file" accept="image/*" class="block" />
          </div>

          <div class="pt-2 flex gap-3">
            <button :disabled="loading" class="px-4 py-2 rounded-lg text-white bg-orange-500 hover:bg-orange-600 disabled:opacity-60">
              {{ loading ? '提交中...' : '提交认证' }}
            </button>
            <button type="button" class="px-4 py-2 rounded-lg border" @click="goBack">返回</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import NavBar from '@/components/layout/NavBar.vue'
import { novelAPI } from '@/api/novel'

const router = useRouter()

const form = ref({
  pen_name: '',
  introduction: '',
  sample_work: '',
})

const frontRef = ref(null)
const backRef = ref(null)
const loading = ref(false)

const submit = async () => {
  if (loading.value) return
  if (!frontRef.value?.files?.length) {
    alert('请上传身份证正面照片')
    return
  }
  loading.value = true
  try {
    const fd = new FormData()
    fd.append('pen_name', form.value.pen_name)
    if (form.value.introduction) fd.append('introduction', form.value.introduction)
    if (form.value.sample_work) fd.append('sample_work', form.value.sample_work)
    fd.append('id_card_front_file', frontRef.value.files[0])
    if (backRef.value?.files?.length) fd.append('id_card_back_file', backRef.value.files[0])

    const res = await novelAPI.registerAuthor(fd)
    alert('提交成功，等待审核')
    router.replace('/author')
  } catch (e) {
    console.error(e)
    alert('提交失败：' + (e?.response?.data?.detail || e?.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

const goBack = () => router.back()
</script>

<style scoped>
</style>
